<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
	</head>
	<body>
		<h1>1-弹出框（Popover）插件</h1>
		<pre>
			1. 通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。 
			&lt;a href="#" data-toggle="popover" title="标题" data-content="正文文本内容" &gt;
			   请悬停在我的上面
			&lt;/a&gt;
			2. 通过 JavaScript：通过 JavaScript 启用弹出框（popover）： 
				$('#identifier').popover(options)
		</pre>
		<div class="container" style="padding: 100px 50px 10px;">
			<button type="button" class="btn btn-default" title="Popover title" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容">
		      左侧的 Popover
		   </button>
			<button type="button" class="btn btn-primary" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容">
		      顶部的 Popover
		   </button>
			<button type="button" class="btn btn-success" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容">
		      底部的 Popover
		   </button>
			<button type="button" class="btn btn-warning" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容">
		      右侧的 Popover
		   </button>
		</div>
		
		<script>
			//不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活
			$(function () { $("[data-toggle='popover']").popover(); });
		</script>
		
		<h2>1.2-常用方法</h2>
		<div class="container" style="padding: 100px 50px 10px;">
			<button type="button" class="btn btn-default popover-show" title="Popover title" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容 —— show 方法">
		      左侧的 Popover
		   </button>
			<button type="button" class="btn btn-primary popover-hide" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容 —— hide 方法">
		      顶部的 Popover
		   </button>
			<button type="button" class="btn btn-success popover-destroy" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容 —— destroy 方法">
		      底部的 Popover
		   </button>
			<button type="button" class="btn btn-warning popover-toggle" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
		      右侧的 Popover
		   </button>
			<p class="popover-options">
				<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" data-container="body" data-toggle="popover" data-content="
		         <h4>Popover 中的一些内容 —— options 方法</h4>">
					Popover
				</a>
			</p>
			<!--<script>
				// 显示元素的弹出框。
				$(function() {
					$('.popover-show').popover('show');
				});
				
				// 隐藏元素的弹出框。
				$(function() {
					$('.popover-hide').popover('hide');
				});
				
				// 隐藏并销毁元素的弹出框。
				$(function() {
					$('.popover-destroy').popover('destroy');
				});
				
				// 切换显示/隐藏元素的弹出框。
				$(function() {
					$('.popover-toggle').popover('toggle');
				});
				
				// 向元素集合附加弹出框句柄。
				$(function() {
					$(".popover-options a").popover({
						html: true	//显示元素本身的html
					});
				});
			</script>-->
			</div>
			
			<h2>1.3-事件</h2>
			
			<div clas="container" style="padding: 100px 50px 10px;">
				<button type="button" class="btn btn-primary popover-show" title="Popover title" 
					data-container="body" data-toggle="popover" data-content="左侧的 Popover 中的一些内容 —— show 方法">
			      左侧的 Popover
			   </button>
			<script>
			</div>
				$(function () {
					alert("xyz");
					$(function () { $('.popover-show').popover('show');});
					 当调用 show 实例方法时立即触发该事件。
					$('.popover-show').on('shown.bs.popover', function () {
     					alert("当显示时警告消息");
					}
					
					//shown.bs.popover 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 
					
					//hide.bs.popover 当调用 hide 实例方法时立即触发该事件。 
					
					//hidden.bs.popover 当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 
					
				});
			</script>
			
		<h1>2-警示框 Alert </h1>
		<pre>
			1. 在标签class 添加:class="alert alert-warning"
			2. 向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能
			3. 通过 JS 代码添加 : $(".alert").alert()
			4. 在class="alert alert-warning" 添加 id="myalert",并给 id 添加关闭事件
		</pre>
		<button onclick="showAlert();">Alert弹框</button>
		<div class="" id="myalert" style="width:300px;height:200px;display:none;">
		   <a href="#" class="close" data-dismiss="alert" >
		      &times;
		   </a>
		   <strong>警告！</strong>您的网络连接有问题。
		</div>
		<script>
			function showAlert(){
				$("#myalert").attr("class","alert alert-warning");
				$("#myalert").css("display","inline");
			}
			
			$(function(){
				//当调用 close 实例方法时立即触发该事件。
				$('#myalert').bind('close.bs.alert', function () {
				  alert("将要警告框关闭!");
				})
				
				//当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。
				$('#myalert').bind('closed.bs.alert', function () {
				  alert("警告框已经关闭!");
				})
			});
		</script>

		
		<h1>3-Button（按钮）插件</h1>
		<h2>3.1-加载状态</h2>
		<p>如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可</p>
		<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." 
		   type="button"> 加载状态
		</button>
		<script>
			$(function() {
				$(".btn").click(function() {
					$(this).button('loading').delay(1000).queue(function() {
						$(this).button('reset');
					});
				});
			});
		</script>

		<h2>3.2-单个切换</h2>
		<p>如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 
		data-toggle="button" 作为其属性</p>
		<button type="button" class="btn btn-primary" 
		   data-toggle="button"> 单个切换
		</button>
		
		<h2>3.3-复选框（Checkbox）</h2>
		<p>您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换</p>
		<div class="btn-group" data-toggle="buttons">
		   <label class="btn btn-primary">
		      <input type="checkbox"> 选项 1
		   </label>
		   <label class="btn btn-primary">
		      <input type="checkbox"> 选项 2
		   </label>
		   <label class="btn btn-primary">
		      <input type="checkbox"> 选项 3
		   </label>
		</div>
		
		<h2>3.4-单选按钮（Radio）</h2>
		<p>类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换</p>
		<div class="btn-group" data-toggle="buttons">
		   <label class="btn btn-primary">
		      <input type="radio" name="options" id="option1"> 选项 1
		   </label>
		   <label class="btn btn-primary">
		      <input type="radio" name="options" id="option2"> 选项 2
		   </label>
		   <label class="btn btn-primary">
		      <input type="radio" name="options" id="option3"> 选项 3
		   </label>
		</div>	

		<h2>3.5-点击每个按钮查看方法效果</h2>
		<h4>演示 .button('toggle') 方法</h4>
		<div id="myButtons1" class="bs-example">
		   <button type="button" class="btn btn-primary">原始</button>
		</div>
		
		<h4>演示 .button('loading') 方法</h4>
		<div id="myButtons2" class="bs-example">
		   <button type="button" class="btn btn-primary" 
		      data-loading-text="Loading...">原始
		   </button>
		</div>
		
		<h4>演示 .button('reset') 方法</h4>
		<div id="myButtons3" class="bs-example">
		   <button type="button" class="btn btn-primary" 
		      data-loading-text="Loading...">原始
		   </button>
		</div>
		
		<h4>演示 .button(string) 方法</h4>
		<button type="button" class="btn btn-primary" id="myButton4" 
		   data-complete-text="Loading finished">请点击我
		</button>
		<script type="text/javascript">
			$(function() {
				//切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。
				$("#myButtons1 .btn").click(function() {
					$(this).button('toggle');
				});
			});
			
			$(function() {
				//当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
				$("#myButtons2 .btn").click(function() {
					$(this).button('loading').delay(1000).queue(function() {});
				});
			});
			
			$(function() {
				//重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。
				$("#myButtons3 .btn").click(function() {
					$(this).button('loading').delay(1000).queue(function() {
						$(this).button('reset');
					});
				});
			});
			
			$(function() {
				//该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。
				$("#myButton4").click(function() {
					$(this).button('loading').delay(1000).queue(function() {
						$(this).button('complete');
					});
				});
			});
		</script>







		
		
	</body>
</html>
